import React from 'react'
import styled from 'styled-components'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import {
  Menu,
} from 'semantic-ui-react'
import { config as configDuck } from 'ducks'
import { CommandBarButton } from 'components/commandBar'
import CommandUser from './commandUser'

const StyledMenu = styled(Menu)`
  min-height: 2.2em!important;
  border: 0px solid #ddd!important;
  border-radius: 0!important;
  margin: 0!important;
  background: #045898!important;
  .item {
    min-height: 2em;
    padding: .2em .5em!important;
  }
  .item .icon {
    font-size: initial!important;
  }
  .open {
    background: #FAFAFA!important;
    color: #045898!important;
  }
  .avatar {
    width: 24px!important;
    height: 24px!important;
    border-radius: .3125em!important;
  }
`
const commandBar = ({ toggleFullScreen }) => (
  <StyledMenu borderless inverted>
    <CommandUser />
    <CommandBarButton icon="expand" action={toggleFullScreen} />
    <CommandBarButton icon="help" action={() => { }} />
  </StyledMenu>
)

commandBar.propTypes = {
  toggleFullScreen: PropTypes.func.isRequired,
}


const mapDispatchToProps = {
  toggleFullScreen: configDuck.creators.toggleFullScreen,
}

export default connect(null, mapDispatchToProps)(commandBar)
